import Search from "@/components/public/Search";
import { getStore } from "@/services/entities/all";
import { View, Text, CoverView } from "@tarojs/components";
import clsx from "clsx";
import { useRef, useState } from "react";
import "./index.scss";
const ChooseStore = ({ isShow = false, setIsShow, onChange }) => {
  const [shopList, setShopList] = useState<any>([]);
  const currentValue = useRef("");

  const getStoreByName = () => {
    getStore({
      currentPage: 1,
      pageSize: 10000,
      name: currentValue.current,
    }).then((res: any) => {
      setShopList(
        res.records.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        })
      );
    });
  };
  return isShow ? (
    <View className={clsx("dialog-container")}>
      <View className="dialog-mask" />
      <View className="dialog">
        <View className="controls br-8 pb-20 pd-lr-20">
          <View className="header pd-tb-20 border-box">
            <View className="dis-flex align-center justify-end">
              <Text
                onClick={() => {
                  setIsShow(false);
                }}
              >
                关闭
              </Text>
            </View>
            <Search
              className="bg-ffffff width-full mt-20"
              placeholder="请输入商家名称"
              onInput={(value) => {
                currentValue.current = value;
              }}
              right={
                <View
                  className="bg-394B5D cl-white fs-28 lh-38 pd-tb-8 border-box pd-lr-38 br-28 mr-4"
                  onClick={() => {
                    getStoreByName();
                  }}
                >
                  搜索
                </View>
              }
            />
          </View>
          {shopList.map((shop, index) => {
            return (
              <View
                key={index}
                className="single-shop dis-flex align-center justify-between pd-tb-20 mt-20"
              >
                <Text>{shop.label}</Text>
                <Text
                  className="cl-blue"
                  onClick={() => {
                    setIsShow(false);
                    onChange(shop);
                  }}
                >
                  选择
                </Text>
              </View>
            );
          })}
        </View>
      </View>
    </View>
  ) : null;
};

export default ChooseStore;
